import {Input ,Button } from '@arco-design/web-react';

import {  IconBook , IconSend } from '@arco-design/web-react/icon';

import { useState } from 'react';

const InfoCollection = ({ submit}) => {
    const [info ,setInfo] = useState({name:'',intro:''})
    return (
        <div className='w-[32%] h-full border-solid p-15'>
            <div span={10} className="flex justify-start items-center border-b-1 pb-8">
                <IconBook style={{ fontSize: '20px', color: 'rgb(40,139,244)' }} />
                <div className='ml-8 text-[16px] font-medium'>产品文案</div>
            </div>

            <div className='my-10'>产品信息/名称</div>
            <Input value={info.name} onChange={(e)=> setInfo({...info , name:e}) } className="bg-[rgb(241,249,255)]" 
                allowClear placeholder='请输入' />

            <div className='my-10'>产品卖点/简介</div>
            <Input.TextArea autoSize={false} value={info.intro} onChange={(e)=> setInfo({...info , intro:e}) } 
                style={{ height: '60%' }}  className="bg-[rgb(241,249,255)] " placeholder='请输入产品卖点,例如简单,易用等' />

            <div className='flex justify-center mt-20'>
                <Button onClick={()=> submit(info)}  className="bg-[rgb(32,135,243)] text-white rounded-20" 
                 type='primary' icon={<IconSend />} >开始拓写</Button>
            </div>
        </div>
    )
}

export default InfoCollection;